<!--切片上传组件(单文件上传)-->
<!--<h1>[title]</h1>-->
<!--<h1>[name]</h1>-->
<!--<h1>[input_value]</h1>-->

<div class="section_upload">
    <label for="fileInput" class="control-label col-xs-12 col-sm-2">[title]:</label>
    <!-- 上传按钮 -->
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <!--            选择文件的input-->
            <input type="file" id="fileInput" style="display: none;">
            <!--            上传文件的相对路径数组-->
            <input id="fileInput_data" data-rule="" class="form-control" size="50" name="[name]" type="text" value="[input_value]" style="display: none;">
            <!--            上传按钮-->
            <div class="input-group-addon no-border no-padding" style="display: table;">
                <span>
                    <button type="button"
                            id="startUploadButton"
                            class="btn btn-danger">
                    <i class="fa fa-upload"></i> {:__('Upload')}
                    </button>
                </span>
            </div>
        </div>

        <!--        文件展示列表-->
        <ul class="row list-inline plupload-preview" id="fileInput_img" data-listidx="0">
            <?php
    $url_arr = '[url_arr]';
    $url_arr = json_decode($url_arr, true);
?>

            {foreach $url_arr as $k=>$v}
            <li class="col-xs-3 specific_li_class" id="specific_li_{$k}">
                <!--展示按钮-->
                <span class="show-filename" style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${filename}">{$v['name']}</span>

                <a href="{$v['url']}" target="_blank" class="thumbnail">
                    <img src="{if($v['is_image'])} {$v['url']} {else /} /assets/img/wenjian.png {/if}" class="img-responsive">
                </a>
                <!--删除按钮-->
                <a href="javascript:;" class="fileInput_del btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
            </li>
            {/foreach}

            <!--            <li  class="col-xs-3">-->
            <!--                &lt;!&ndash;展示按钮&ndash;&gt;-->
            <!--                <span  style="display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">文件名称xxxxxxxxxxxxxx.mp3</span>-->
            <!--                <a href="javascript:;" target="_blank" class="thumbnail">-->
            <!--                    <img src="/nYFpaxNKLR.php/ajax/icon?suffix=mp3"  class="img-responsive">-->
            <!--                </a>-->
            <!--                &lt;!&ndash;删除按钮&ndash;&gt;-->
            <!--                <a href="javascript:;" class="fileInput_del btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>-->
            <!--            </li>-->
        </ul>

        <!--        <button id="getInputData">检修按钮</button>-->
    </div>
</div>

<style>
    .show-filename {
        pointer-events: none; /* 防止 span 遮挡链接等可点击元素 */
    }

    .show-filename:hover {
        overflow: visible;
        white-space: normal;
        background-color: white;
        position: absolute;
        z-index: 1;
    }
</style>

